// Theming variables, mixins and includes

$black: #414453;
$white: #fff;
$cool-charcoal: lighten($black, 10%); // #575b70
$cool-darkgray: lighten($black, 20%); // #6e738c
$cool-gray: lighten($black, 30%); // #8a8ea3
$cool-silver: lighten($black, 40%); // #a6aaba
$cool-lightgray: lighten($black, 60%); // #e0e1e6
$divider-color: lighten($black, 63%); // #e8e9ed
$cool-whitegray: lighten($black, 67%); // #f4f4f6
$cool-blue: #2095f3;
$cool-green: #52c5d0;
$warm-green: #52ce7b;
$cool-red: #ff556a;
$cool-orange: #ffaa56;

$root-background: $cool-whitegray;

$font: "Roboto", "Helvetica", "Arial", sans-serif !default;
$layout-text-color: #414453 !default;
$layout-nav-color: white !default;
$layout-header-bg-color: #414453 !default;
$layout-drawer-nav-link-color: #7d8a93 !default;
$layout-drawer-nav-link-active-bg: #f9f9f9 !default;
$layout-desktop-header-height: 64px;

@mixin box-shadow {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.06), 0 2px 2px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

// element appears to be above regular box-shadow elements
@mixin box-shadow-mid {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 8px 8px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

// element appears to be above mid box-shadow elements
@mixin box-shadow-top {
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06), 0 12px 12px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

@mixin form-builder-focus {
  outline-color: $cool-blue;
  outline-offset: -2px;
  outline-style: auto;
  outline-width: 5px;
}

html {
  color: $cool-darkgray;
}

body {
  background: $root-background;
}

html, body, input, textarea, select, button {
  font-family: $font;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

a {
  color: $cool-blue;
}

p {
  margin-bottom: 16px;
}

h3, h4, h5, h6 {
  font-weight: 400;
}

@import "mdl.layout";
@import "mdl.grid";
@import "mdl.buttons";
